<template>
  <div class="box" >
    <el-popover ref="popover" offset="800" placement="right" trigger="hover" :disabled="isDragging">
      <div slot="reference" @mousedown="handleMouseDown">
        <el-image @click.native="handleClick" ref="imgVm" :preview-src-list="srcList" fit="cover" :src="model.url" style="width: 100px; height: 100px"></el-image>
      </div>
      <el-image @mouseover="handleMouseDown" @mouseenter="handleMouseDown" fit="contain" :src="model.url" style="width: 450px; height: 315px"></el-image>
    </el-popover>

    <div class="tips fs-md text-white text-center">
      <template v-if="!model.selectAble">{{ model.tagName }}</template>
      <el-select size="mini" v-else v-model="value" placeholder="请选择" @change="handleChange(model.fileId, value)">
        <el-option v-for="item in imgTags" :key="item.tagCode" :label="item.tagName" :value="item.tagName"></el-option>
      </el-select>
    </div>
    <div v-if="model.invalid" class="invalid fs-xl text-white text-center d-flex">
      <span style="margin: auto">
        图片尺寸
        <br />不合格
      </span>
    </div>
    <i class="el-icon-remove text-red fs-xxxl bg-white" @click="handleRemove(model.fileId)"></i>
    <el-button
      v-if="model.tagCode !== 'xiaoqu'"
      class="move-btn"
      size="mini"
      type="primary"
      @click="handleMove(model)"
      >{{ model.tagCode=='huxingtu' ? "移至室内图" : "移至户型图" }}</el-button
    >
  </div>
</template>

<script>
import imgTags from "@/config/house/imgTags.json";
export default {
  props: {
    model: {
      type: Object,
      default() {
        return {};
      },
    },
    isDragging: {
      type: Boolean,
      default: false,
    },

    srcList: Array,
  },
  data() {
    return {
      imgTags: Object.freeze(imgTags.filter((v) => v.tagCode != "huxingtu" && v.tagCode != "xiaoqu")),
      value: this.model.tagName,
    };
  },
  mounted() {
    
    
  },
  methods: {
    handleClick() {
      const vm = this.$refs.imgVm;
      if(vm.$children && vm.$children[0]) {
        vm.$children[0].infinite = false
      }
    },
    handleChange(fileId, value) {
      let item = imgTags.find((v) => v.tagName == value);
      this.$emit("onmodelupdate", fileId, { ...item });
    },
    handleMouseDown() {
      this.$refs.popover.doClose();
    },
    handleRemove(fileId) {
      this.$messageBox
        .confirm(`确定删除？`)
        .then(() => {
          this.$emit('onremove', fileId)
        });
    },
    handleMove() {
      // let title = this.model.tagCode == 'huxingtu' ? "移至室内图" : "移至户型图";
      this.$emit("onmove", this.model);
      // this.$messageBox
      //   .confirm(`确定${title}？`)
      //   .then(() => {
      //     this.$emit("onmove", this.model);
      //   });
    },
  },
};
</script>

<style scoped>
.box {
  position: relative;
  margin-right: 10px;
  margin-top: 10px;
  padding-bottom: 30px;
}
.box .invalid {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  line-height: 30px;
}
.box .tips {
  position: absolute;
  bottom: 36px;
  left: 0;
  right: 0;
  line-height: 28px;
  background: rgba(0, 0, 0, 0.5);
}
.box .el-icon-remove {
  position: absolute;
  top: 0;
  right: 0;
  border-radius: 50%;
  transform: translate(50%, -50%);
}

.box .el-icon-remove:hover {
  cursor: pointer;
}

.box >>> .el-input--mini .el-input__inner {
  background: transparent;
  color: white;
  border: none;
  font-size: 14px;
}
.move-btn {
  position: absolute;
  width: 100px;
  bottom: 3px;
  z-index: 1;
}
</style>
